<template>
	<div class="wrap">
		<!-- 搜索条件 -->
		<el-form
			ref="form"
			:inline="true"
			size="small"
			:model="forms"
			class="form"
			label-width="100px"
			style="display: flex; flex-wrap: wrap"
		>
			<el-form-item label="赛事名称" prop="race_name">
				<el-input
					v-model="forms.race_name"
					placeholder="请输入赛事名称"
					clearable
					style="width: 200px"
				/>
			</el-form-item>
			<el-form-item label="赛事省份" prop="provice_id">
				<el-select
					v-model="forms.provice_id"
					placeholder="请选择"
					clearable
					filterable
					style="width: 200px"
					@change="
						forms.city_id = ''
						getColumn(forms.provice_id)
					"
				>
					<el-option label="全部" value="" />
					<el-option
						v-for="item in columnOptions"
						:key="item.region_id"
						:label="item.region_name"
						:value="item.region_id"
					/>
				</el-select>
			</el-form-item>
			<el-form-item label="赛事城市" prop="city_id">
				<el-select
					v-model="forms.city_id"
					placeholder="请选择"
					clearable
					filterable
					style="width: 200px"
				>
					<el-option
						v-for="item in cityOptions"
						:key="item.region_id"
						:label="item.region_name"
						:value="item.region_id"
					/>
				</el-select>
			</el-form-item>
			<el-form-item label="创建时间" prop="cid_no">
				<el-date-picker
					v-model="forms.date"
					type="daterange"
					range-separator="至"
					start-placeholder="开始日期"
					end-placeholder="结束日期"
					value-format="yyyy-MM-dd"
				></el-date-picker>
			</el-form-item>
			<el-form-item label="比赛开始时间" prop="cid_no">
				<el-date-picker
					v-model="forms.date2"
					type="daterange"
					range-separator="至"
					start-placeholder="开始日期"
					end-placeholder="结束日期"
					value-format="yyyy-MM-dd"
				></el-date-picker>
			</el-form-item>
			<p class="line">
				<el-button icon="el-icon-search" type="primary" size="small" @click="loadData">
					搜索
				</el-button>
			</p>
		</el-form>
		<div class="answer-bot">
			<div style="padding-bottom: 10px">
				<el-button
					type="primary"
					size="small"
					plain
					@click="$router.push({ path: '/competition-manage/create' })"
				>
					创建赛事
				</el-button>
			</div>
			<el-table
				:data="tableData"
				style="margin-top: 5px"
				stripe
				border
				:cell-style="() => ({ textAlign: 'center' })"
				:header-cell-style="() => ({ textAlign: 'center' })"
			>
				<el-table-column
					label="赛事编号"
					prop="race_id"
					min-width="100px"
					show-overflow-tooltip
					align="center"
				/>
				<el-table-column
					label="赛事名称"
					prop="race_name"
					min-width="140px"
					show-overflow-tooltip
					align="center"
				/>
				<el-table-column
					label="赛事城市"
					prop="city_name"
					min-width="110px"
					show-overflow-tooltip
					align="center"
				/>
				<el-table-column
					label="赛事开始时间"
					prop="race_start_time"
					min-width="160px"
					show-overflow-tooltip
					align="center"
				/>
				<el-table-column
					label="赛事截止时间"
					prop="race_end_time"
					min-width="160px"
					show-overflow-tooltip
					align="center"
				/>
				<el-table-column
					label="赛事状态"
					min-width="100px"
					show-overflow-tooltip
					:formatter="
						row =>
							row.race_status === 1
								? '进行中'
								: row.race_status === 2
								? '已饱满'
								: row.race_status === 3
								? '停止报名'
								: row.race_status === 4
								? '已结束'
								: '--'
					"
				/>
				<el-table-column label="赛事首图" min-width="160px">
					<template slot-scope="{ row }">
						<el-image
							style="width: 120px; height: auto"
							:src="row.race_img"
							:preview-src-list="[row.race_img]"
						></el-image>
					</template>
				</el-table-column>
				<el-table-column label="操作" width="220" align="center" fixed="right">
					<template slot-scope="{ row }">
						<el-link
							type="primary"
							:underline="false"
							@click="
								$router.push({ path: '/competition-manage/detail', query: { id: row.race_id } })
							"
						>
							详情
						</el-link>
						<el-link
							type="primary"
							:underline="false"
							@click="
								$router.push({ path: '/competition-manage/create', query: { id: row.race_id } })
							"
						>
							编辑
						</el-link>
						<el-link type="primary" :underline="false" @click="changeOnlineStatus(row)">
							{{ row.is_online === 0 ? '上架' : '下架' }}
						</el-link>
						<el-link type="primary" :underline="false" @click="$refs.question.initData(row)">
							设置答题
						</el-link>
						<el-link type="primary" :underline="false" @click="$refs.import.init(row)">
							上传成绩
						</el-link>
						<el-link type="primary" :underline="false" @click="onClear(row)">清除缓存</el-link>
					</template>
				</el-table-column>
			</el-table>
			<el-row type="flex" justify="center">
				<el-col :span="24" style="text-align: right">
					<Pagination
						:total="total"
						:page.sync="pageNo"
						:limit.sync="pageSize"
						scroll-el="el-main"
						@pagination="pageChange"
					/>
				</el-col>
			</el-row>
		</div>
		<relationQuestion ref="question"></relationQuestion>
		<ImportScore ref="import"></ImportScore>
	</div>
</template>

<script>
	import { getList, regionLists, onOrOffRace, clearCache } from '@/api/competition-manage'
	import Pagination from '@/components/Pagination'
	import relationQuestion from './components/relationQuestion.vue'
	import ImportScore from './components/ImportScore.vue'
	export default {
		components: {
			Pagination,
			relationQuestion,
			ImportScore
		},
		data() {
			return {
				forms: {
					race_name: '',
					city_id: '',
					provice_id: '',
					date: [],
					date2: []
				},
				pageNo: 1,
				pageSize: 10,
				total: 0,
				tableData: [],
				columnOptions: [],
				cityOptions: []
			}
		},
		created() {
			this.getColumn()
			this.searchData()
		},
		methods: {
			getColumn(parent) {
				regionLists({ region_parent: parent || 0 }).then(res => {
					if (parent) {
						this.cityOptions = res.data
					} else {
						this.columnOptions = res.data
					}
				})
			},
			// 搜索
			searchData() {
				this.pageNo = 1
				this.loadData()
			},
			// 分页
			pageChange({ page, limit }) {
				this.pageNo = page
				this.pageSize = limit
				this.loadData()
			},
			loadData() {
				const loading = this.$setLoading()
				this.tableData = []
				getList({
					race_name: this.forms.race_name,
					city_id: this.forms.city_id,
					start_time: this.forms.date.length ? this.forms.date[0] : '',
					end_time: this.forms.date.length ? this.forms.date[1] : '',
					race_start_time: this.forms.date2.length ? this.forms.date2[0] : '',
					race_end_time: this.forms.date2.length ? this.forms.date2[1] : '',
					page_no: this.pageNo,
					page_size: this.pageSize
				}).then(
					res => {
						this.tableData = res.data.lists
						this.total = Number(res.data.total)
						loading.close()
					},
					err => {
						loading.close()
					}
				)
			},
			editDetails(row) {
				this.$refs.details.init(row)
			},
			// 封号/解封
			changeOnlineStatus(row) {
				this.$confirm(`确定要${row.is_online == 0 ? '上架' : '下架'}当前赛事吗?`, '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				})
					.then(async () => {
						const loading = this.$setLoading({ text: '提交中，请稍等~' })
						const res = await onOrOffRace({
							race_id: row.race_id,
							is_online: row.is_online == 1 ? 0 : 1
						})
						this.$message.success('操作成功！')
						loading.close()
						this.loadData()
					})
					.catch(() => {
						loading.close()
					})
			},
			// 清空缓存
			async onClear(row) {
				const loading = this.$setLoading({ text: '提交中，请稍等~' })
				try {
					const res = await clearCache({
						race_id: row.race_id
					})
					this.$message.success('操作成功！')
					loading.close()
				} catch (err) {
					loading.close()
					console.log(err)
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.app-container {
		.roles-table {
			margin-top: 30px;
		}

		.tree-label {
			font-size: 14px;
			color: #606266;
			font-weight: bolder;
			padding-left: 9px;
		}

		.permission-tree {
			margin: 30px;
		}
	}

	.el-link {
		margin: 0 5px;
	}
	.form {
		background: #ffffff;
		padding: 20px 10px 0;
		margin-bottom: 10px;
		border-radius: 2px;
		display: flex;
		flex-wrap: wrap;
	}
	.line {
		height: 36px;
		margin: 0 0 10px 18px;
		border-left: 1px solid #e5e6eb !important;
		padding: 0 0 0 18px;
	}
	.answer-bot {
		padding: 16px;
		border-radius: 2px;
		background-color: #ffffff;
		.bot-title {
			font-size: 16px;
			font-family: PingFangSC-Regular, PingFang SC;
			color: #000000;
		}
	}
</style>
